Skip to main content

HTML Background Images

Use the HTML style attribute and the CSS background-image property to add a background image to an HTML element:

tip

A background image can be specified for almost any HTML element.

Example

Add a background image on a HTML element:

<p style="background-image: url('img_girl.jpg');">Text</p>

You can also specify the background image in the <style> element, in the <head> section or use CSS file.

p {
  background-image: url("img_girl.jpg");
}
Loading...
tip

There are other css properties to manipulate the background Image.

  • Background Repeat

    If the background image is smaller than the element, the image will repeat itself, horizontally and vertically, until it reaches the end of the element By default, the background image is set to repeat. Set the background-repeat property to no-repeat to prevent the background picture from repeating itself.

#backgroundImage {
  background-image: url("/img/tutorial/leaf.jpg");
  color: white;
  background-repeat: no-repeat;
}
  • Background Cover

Set the background-size attribute to cover if you want the background picture to cover the whole element.

Set the background-attachment attribute to fixed to ensure that the full element is constantly covered:

The background picture will fill the whole element in this manner, with no stretching (the image will retain its original proportions):

#backgroundImage {
  background-image: url("/img/tutorial/leaf.jpg");
  color: white;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}